<template>
	<view class="order-wrapper">
		<!-- 收货地址 -->
		<view class="address">
			<view v-if="addressInfo.provinceName">
				<view class="address-title">
					{{address}}
				</view>
				<view class="address-info">
					<text>{{addressInfo.userName}}</text>
					<text>{{addressInfo.telNumber}}</text>
				</view>
			</view>
			<view v-else>
				<button class="choose-address" @click="chooseAddress">选择地址</button>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="title">
			已选商品
		</view>

		<!-- 循环的购物车数据 -->
		<view class="goods-item" v-for="(item, key, index) in goods" :key="key">
			<!-- 图片 -->
			<navigator :url="`/pages/goods_detail/goods_detail?goodsId=${item.goods_id}`">
				<image :src="item.goods_small_logo" mode="aspectFill"></image>
			</navigator>
			<!-- 右边的商品信息 -->
			<view class="goods-info">
				<!-- 标题 -->
				<navigator :url="`/pages/goods_detail/goods_detail?goodsId=${item.goods_id}`" class="goods-title">
					{{item.goods_name}}
				</navigator>
				<!-- 价格和数量 -->
				<view class="goods-info-bottom">
					<view class="goods-price">
						￥{{item.goods_price}}
					</view>
					<view class="goods-number">
						x{{item.count}}
					</view>
				</view>
			</view>
		</view>

		<!-- 底部的总计 -->
		<view class="footer">
			<view class="all-price">
				合计：<text>￥{{totalPrice}}</text>
			</view>
			<button type="warn" open-type="getUserInfo" @getuserinfo="toPay">去支付</button>
		</view>
	</view>
</template>

<script>
	import getToken from '../../utils/getToken.js'
	export default {
		data() {
			return {
				goods: {},
				addressInfo: {},
				params: {}
			}
		},
		computed: {
			totalPrice() {
				let price = 0
				Object.keys(this.goods).forEach(key => {
					if (this.goods[key].selected) {
						price += this.goods[key].goods_price * this.goods[key].count
					}
				})
				return price
			},
			address(){
				return this.addressInfo.provinceName+this.addressInfo.cityName+this.addressInfo.countyName+this.addressInfo.detailInfo
			}
		},
		onShow() {
			const goods = wx.getStorageSync('goods')
			let cacheGoods = {}
			Object.keys(goods).forEach(key => {
				if (goods[key].selected) {
					cacheGoods[key] = goods[key]
				}
			})
			this.goods = cacheGoods
		},
		methods: {
			toPay(e) {
				if(!this.addressInfo.provinceName){
					uni.showToast({
					  title: '请输入收货地址',
					  icon: 'none',
					  duration: 2000
					})
					return
				}
				const token = uni.getStorageSync('token')
				if (token) {
					this.createOrder(token)
				} else {
					getToken(e).then(token => {
						uni.setStorageSync('token',token)
						this.createOrder(token)
					})
				}
			},
			// 创建订单
			createOrder(token){
				uni.showLoading({
					title: "发起支付中",
					mask: true
				})
				const goods = Object.keys(this.goods).map(key => this.goods[key])
				uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create',
					method: 'post',
					header:{
						Authorization: token
					},
					data: {
						order_price: this.totalPrice,
						consignee_addr: this.address,
						goods
					},
					success: (res) => {
						// 获取支付参数
						wx.request({
							method: 'post',
							url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder',
							header:{
								Authorization: token
							},
							data: {
								order_number: res.data.message.order_number
							},
							success: (res) => {
								// 发起支付
								uni.hideLoading()
								uni.requestPayment({
									...res.data.message.pay
								})
							}
						})
					}
				})
			},
			chooseAddress() {
				uni.chooseAddress({
					success: (res) => {
						this.addressInfo = { ...res
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.address {
		border-bottom: 20rpx #eee solid;
		;
		padding: 20rpx 20rpx 40rpx;

		.address-title {
			font-size: 14px;
			margin-bottom: 5px;
		}

		.address-info {
			font-size: 13px;
			color: #999;

			text {
				margin-right: 30rpx;
			}
		}

		.choose-address {
			width: 303rpx;
			height: 89rpx;
			border-radius: 50px;
			border: 1px #EA4350 solid;
			line-height: 89rpx;
			background: #fff;
			margin: 0 auto;
			color: #EA4350;
			font-size: 14px;
		}
	}


	.title {
		padding: 20rpx;
	}

	.goods-item {
		padding: 20rpx 30rpx;
		display: flex;
		height: 191rpx;
		align-items: center;
		border-bottom: 1px #eee solid;

		image {
			width: 191rpx;
			height: 191rpx;
			display: block;
			margin-right: 30rpx;
			flex-shrink: 0;
		}

		.goods-info {
			display: flex;
			flex: 1;
			height: 100%;
			flex-direction: column;
			justify-content: space-between;


			.goods-title {
				font-size: 14px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goods-info-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.goods-price {
					color: red;
				}
			}
		}
	}

	.order-wrapper {
		padding-bottom: 83rpx;

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 82rpx;
			border-top: 1px #eee solid;
			background: #fff;
			display: flex;
			align-items: center;
			font-size: 14px;
			box-sizing: border-box;
			padding: 0 30rpx;

			.all-price {
				flex: 1;

				text {
					color: red
				}
			}

			button {
				width: 150rpx;
				height: 52rpx;
				line-height: 53rpx;
				font-size: 12px;
				border-radius: 50px;
				box-sizing: border-box;
			}
		}
	}
</style>
